<template>
  <BreadcrumbBar
    parent-label="Access IP Management"
    child-label="IP Control List"
  ></BreadcrumbBar>

  <InputForm>
    <InputItem label="IP地址">
      <el-input
        v-model="accessIpInfo.ipAddress"
        style="width: 100%; height: 100%"
        clearable
        placeholder="IP地址"
      />
    </InputItem>
    <InputItem label="类型">
      <el-select
        v-model="accessIpInfo.type"
        placeholder="选择IP类型"
        size="large"
        clearable
      >
        <el-option label="黑名单 Black" value="Black" />
        <el-option label="白名单 White" value="White" />
      </el-select>
    </InputItem>
    <InputItem label="状态">
      <el-select
        v-model="accessIpInfo.enable"
        placeholder="选择IP状态"
        size="large"
        clearable
      >
        <el-option label="启用" :value="0" />
        <el-option label="禁用" :value="1" />
      </el-select>
    </InputItem>

    <ButtomItem label="操作">
      <el-button
        style="height: 100%"
        v-once-click
        color="#626aef"
        plain
        :icon="Search"
        @click="getAccessIpList"
      >
        条件查询
      </el-button>
      <el-button
        style="height: 100%"
        v-once-click
        color="#626aef"
        plain
        :icon="Refresh"
        @click="resetSearch"
      >
        重置查询
      </el-button>
      <el-button
        style="height: 100%"
        v-once-click
        color="#626aef"
        plain
        @click="openCreateDialog"
      >
        新增记录
      </el-button>

      <DesensitizeDataVerify
        @success-handler="getAccessIpList"
      ></DesensitizeDataVerify>
    </ButtomItem>
  </InputForm>

  <TableCard operation-bar-label="批量操作受控IP记录">
    <template #operationBar>
      <el-button
        v-once-click
        color="#626aef"
        plain
        size="small"
        @click="setIpsEnableStatus(multipleSelectionItems, 0)"
      >
        启用
      </el-button>
      <el-button
        v-once-click
        type="info"
        size="small"
        @click="setIpsEnableStatus(multipleSelectionItems, 1)"
      >
        禁用
      </el-button>
      <el-popconfirm
        title="确认删除"
        placement="right"
        @confirm="deleteAccessIpList(multipleSelectionItems)"
      >
        <template #reference>
          <el-button v-once-click color="#F56C6C" plain size="small">
            删除
          </el-button>
        </template>
      </el-popconfirm>
    </template>

    <template #table>
      <el-table
        :data="records"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :headerCellStyle="tableHeaderCellStyle"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column property="ipAddress" label="ipAddress" width="180" />
        <el-table-column property="type" label="type" width="100" />
        <el-table-column property="enable" label="enable" width="80">
          <template #default="scope">
            <el-tag v-if="scope.row.enable === 1" type="danger"> 禁用 </el-tag>
            <el-tag v-if="scope.row.enable === 0" type="success"> 启用 </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          property="remark"
          label="remark"
          show-overflow-tooltip
        />
        <el-table-column property="createTime" label="createTime" width="200" />
        <el-table-column property="updateTime" label="updateTime" width="200" />
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="scope">
            <el-button
              v-once-click
              type="info"
              size="small"
              v-if="scope.row.enable === 0"
              @click="setIpsEnableStatus([scope.row.id], 1)"
            >
              禁用
            </el-button>
            <el-button
              v-once-click
              color="#626aef"
              plain
              size="small"
              v-if="scope.row.enable === 1"
              @click="setIpsEnableStatus([scope.row.id], 0)"
            >
              启用
            </el-button>
            <el-button
              v-once-click
              color="#E6A23C"
              plain
              size="small"
              @click="
                openUpdateDialog(
                  scope.row.id,
                  scope.row.ipAddress,
                  scope.row.type,
                  scope.row.remark
                )
              "
            >
              修改
            </el-button>
            <el-popconfirm
              title="确认删除"
              placement="left"
              @confirm="deleteAccessIpList([scope.row.id])"
            >
              <template #reference>
                <el-button v-once-click color="#F56C6C" plain size="small">
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <template #paginationBar>
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :background="true"
        :total="total"
        :page-sizes="[20, 30, 40, 50, 60]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handlePageSizeChange"
        @current-change="handlePageNumChange"
    /></template>
  </TableCard>

  <!--  -->
  <!-- 受控IP记录创建对话框 -->
  <el-dialog
    v-model="createDialogVisible"
    title="创建IP信息对话框"
    width="800px"
    :before-close="closeControlIpDialog"
  >
    <InputForm>
      <InputItem label="IP地址">
        <el-input
          v-model="ipAddress"
          placeholder="请输入IP地址"
          maxlength="20"
          show-word-limit
          style="width: 100%; height: 100%"
      /></InputItem>
      <InputItem label="IP类型">
        <el-select
          v-model="type"
          placeholder="选择IP类型"
          size="large"
          clearable
        >
          <el-option label="黑名单 Black" value="Black" />
          <el-option label="白名单 White" value="White" /> </el-select
      ></InputItem>
      <InputItem label="备注">
        <el-input
          v-model="remark"
          placeholder="备注"
          maxlength="20"
          show-word-limit
          style="width: 100%; height: 100%"
      /></InputItem>
    </InputForm>

    <template #footer>
      <div>
        <el-button
          style="width: 120px"
          color="#909399"
          plain
          @click="closeControlIpDialog"
        >
          取消
        </el-button>
        <el-button
          style="width: 120px"
          color="#626aef"
          @click="createDialogConfirmHandler"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!--  -->
  <!-- 受控IP记录修改对话框 -->
  <el-dialog
    v-model="updateDialogVisible"
    title="修改IP信息对话框"
    width="800px"
    :before-close="closeControlIpDialog"
  >
    <InputForm>
      <InputItem label="IP地址">
        <el-input
          v-model="ipAddress"
          placeholder="请输入IP地址"
          maxlength="20"
          show-word-limit
          style="width: 100%; height: 100%"
      /></InputItem>
      <InputItem label="IP类型">
        <el-select
          v-model="type"
          placeholder="选择IP类型"
          size="large"
          clearable
        >
          <el-option label="黑名单 Black" value="Black" />
          <el-option label="白名单 White" value="White" /> </el-select
      ></InputItem>
      <InputItem label="备注">
        <el-input
          v-model="remark"
          placeholder="备注"
          maxlength="20"
          show-word-limit
          style="width: 100%; height: 100%"
      /></InputItem>
    </InputForm>

    <template #footer>
      <div>
        <el-button
          style="width: 120px"
          color="#909399"
          plain
          @click="closeControlIpDialog"
        >
          取消
        </el-button>
        <el-button
          style="width: 120px"
          color="#626aef"
          @click="updateDialogConfirmHandler"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { Refresh, Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
import {
  getAccessIpListApi,
  addAccessIpListApi,
  updateAccessIpListItemApi,
  setIpsEnableStatusApi,
  deleteAccessIpListApi,
} from '@/request/api/accessIpControl'
import {
  useThemeStore,
  useDesensitizeVerifyStore,
} from '@/features/store/store'

import DesensitizeDataVerify from '@/components/DesensitizeDataVerify/DesensitizeDataVerify.vue'
import InputForm from '@/components/InputForm/InputForm.vue'
import InputItem from '@/components/InputForm/InputItem.vue'
import ButtomItem from '@/components/InputForm/ButtomItem.vue'
import TableCard from '@/components/TableCard/TableCard.vue'
import BreadcrumbBar from '@/components/BreadcrumbBar/BreadcrumbBar.vue'

const { tableHeaderCellStyle } = useThemeStore()
const { judgeExpireTime } = useDesensitizeVerifyStore()

onMounted(() => {
  getAccessIpList()
})

const total = ref<number>(0)
const pageNum = ref<number>(1)
const pageSize = ref<number>(20)
const handlePageNumChange = (val: number) => {
  pageNum.value = val
  getAccessIpList()
}
const handlePageSizeChange = (val: number) => {
  pageSize.value = val
  getAccessIpList()
}

// 表格记录
const records = ref<AccessIpItf[]>([])
// 筛选条件
const accessIpInfo = ref<AccessIpItf>({
  ipAddress: null,
  type: null,
  enable: null,
})

// 获取受控ip列表数据
const getAccessIpList = async () => {
  const res = await getAccessIpListApi(
    accessIpInfo.value,
    pageNum.value,
    pageSize.value
  )
  if (res.code !== 200) return ElMessage.error('获取表格数据失败')

  records.value = res.data.records
  total.value = res.data.total
}

// 重置查询
const resetSearch = () => {
  accessIpInfo.value = {
    ipAddress: null,
    type: null,
    enable: null,
  }
  getAccessIpList()
}

// ip记录id
const ipRecordId = ref<string>('')
// ip 地址
const ipAddress = ref<string>('')
// ip 类型
const type = ref<'Black' | 'White'>(null)
// 备注
const remark = ref<string>('')

// 创建受控IP记录对话框
const createDialogVisible = ref(false)
// 修改受控IP记录对话框
const updateDialogVisible = ref(false)

const openCreateDialog = async () => {
  const sta = await judgeExpireTime()
  if (sta === false) return ElMessage.error('请先进行脱敏校验认证')

  createDialogVisible.value = true
}
const openUpdateDialog = async (
  id: string,
  ip: string,
  typeVal: 'Black' | 'White',
  remarkVal: string
) => {
  const sta = await judgeExpireTime()
  if (sta === false) return ElMessage.error('请先进行脱敏校验认证')

  ipRecordId.value = id
  ipAddress.value = ip
  type.value = typeVal
  remark.value = remarkVal
  updateDialogVisible.value = true
}
const closeControlIpDialog = () => {
  ipRecordId.value = ''
  ipAddress.value = ''
  type.value = null
  remark.value = ''
  createDialogVisible.value = false
  updateDialogVisible.value = false
}
const createDialogConfirmHandler = () => {
  addAccessIpList()
  closeControlIpDialog()
}
const updateDialogConfirmHandler = () => {
  updateAccessIpListItem()
  closeControlIpDialog()
}

// 新增受控ip记录信息
const addAccessIpList = async () => {
  const accessIP: AccessIpItf = {
    ipAddress: ipAddress.value,
    type: type.value,
    enable: 0,
    remark: remark.value,
  }
  const res = await addAccessIpListApi(accessIP)
  if (res.code != 200) return ElMessage.error('新增失败')
  ElMessage.success('新增成功')
  getAccessIpList()
}

// 更新受控ip记录信息
const updateAccessIpListItem = async () => {
  const accessIP: AccessIpItf = {
    id: ipRecordId.value,
    ipAddress: ipAddress.value,
    type: type.value,
    remark: remark.value,
  }
  const res = await updateAccessIpListItemApi(accessIP)
  if (res.code != 200) return ElMessage.error('更新失败')
  ElMessage.success('更新成功')
  getAccessIpList()
}

// 多选权限选项
const multipleSelectionItems = ref<string[]>([])
const handleSelectionChange = (val: AccessIpItf[]) => {
  let ids: string[] = []
  for (let item of val) ids.push(item.id)
  multipleSelectionItems.value = ids
}

// 批量删除权限
const deleteAccessIpList = async (ids: string[]) => {
  const res = await deleteAccessIpListApi(ids)
  if (res.code !== 200) return ElMessage.error('IP信息删除失败！')
  ElMessage.success('IP信息删除成功！')
  getAccessIpList()
}

// 批量更新权限状态
const setIpsEnableStatus = async (ids: string[], status: 0 | 1) => {
  const res = await setIpsEnableStatusApi(ids, status)
  if (res.code !== 200) return ElMessage.error('IP信息状态更新失败！')
  ElMessage.success('IP信息状态更新成功！')
  getAccessIpList()
}
</script>

<style lang="less" scoped></style>
